<template>
    <div>
        <el-button type="text" @click="loginFormVisible=true">登 录</el-button>
        <el-dialog title="请登录" :visible.sync="loginFormVisible" width="400px" center :modal="false">
            <el-form :model="loginForm" label-position="left">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="loginForm.username" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="loginForm.password" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="login">确 定</el-button>
                <el-button @click="loginFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>

        <el-button type="text" @click="registerFormVisible=true">注 册</el-button>
        <el-dialog title="注册" :visible.sync="registerFormVisible" width="400px" center :modal="false">
            <el-form :model="registerForm" label-position="left">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="registerForm.username" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="registerForm.password" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="register">确 定</el-button>
                <el-button @click="registerFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import dataStorage from '../utils/dataStorage'
    export default {
        data() {
            return {
                loginFormVisible: false,
                registerFormVisible: false,
                loginForm: {
                    username: 'yh',
                    password: '123'
                },
                registerForm: {
                    username: '',
                    password: ''
                },
                formLabelWidth: '60px'
            };
        },
        methods: {
            login() {
                this.loginFormVisible = false
                this.axios.post('http://localhost:3000/api/user/login', {
                    username: this.loginForm.username,
                    password: this.loginForm.password
                }).then(res => {
                    if (res.data.status === 200) {
                        dataStorage.setToken(res.data.token)
                        dataStorage.setUserInfo(res.data.user)
                        this.$store.commit('isLogin', true)
                        this.$store.commit('setUserInfo')
                        this.$notify({
                            title: '登录成功',
                            message: '欢迎使用CodeHub！',
                            type: 'success',
                            duration: 1000,
                            offset: 50
                        })
                    } else {
                        // setToken('123456789')
                        this.$notify({
                            title: res.data.message,
                            message: '请重新登录',
                            type: 'error',
                            duration: 1000,
                            offset: 100
                        })
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            register() {
                this.registerFormVisible = false
                this.axios.post('http://localhost:3000/api/user/register', {
                    username: this.registerForm.username,
                    password: this.registerForm.password
                }).then(res => {
                    if (res.data.status === 200) {
                        this.$notify({
                            title: '注册成功',
                            message: '欢迎使用CodeHub！',
                            type: 'success',
                            duration: 1000,
                            offset: 50
                        })
                        console.log(res.data);
                    } else {
                        // setToken('123456789')
                        this.$notify({
                            title: res.data.message,
                            message: '注册失败',
                            type: 'error',
                            duration: 1000,
                            offset: 100
                        })
                    }
                      console.log(res.data);
                }).catch(error => {
                    console.log(error)
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }

    };
</script>